<template>
  <el-menu class="el-menu-demo" mode="horizontal">
    <span>LightSwitch</span>
  </el-menu>

  <el-row>
    <el-col :span="12"
      ><div />
      <div id="chart1"></div>
      <h1 id="temp">温度</h1>
    </el-col>
    <el-col :span="12"
      ><div />
      <div id="chart2"></div>
      <h1 id="humi">湿度</h1>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "monitorDev",
  data() {
    return {};
  },
  mounted() {
    this.onMonitor();
  },
  methods: {
    onMonitor() {
      console.log("开始连接");

      var myChart1 = echarts.init(document.getElementById("chart1"));
      var myChart2 = echarts.init(document.getElementById("chart2"));

      setTimeout(function () {
        let ws = new WebSocket("wss://3098l4z890.picp.vip/websocket/getmeg");
        ws.onmessage = (info) => {
          console.log(info);
          var obj = JSON.parse(info.data);
          var temp = JSON.parse(obj.LightSwitch.property.temp).toFixed(2);
          var humi = JSON.parse(obj.LightSwitch.property.humi).toFixed(2);
          console.log(temp);
          console.log(humi);

          myChart1.setOption({
            series: [
              {
                type: "gauge",
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 10,
                itemStyle: {
                  color: "#FFAB91",
                },
                progress: {
                  show: true,
                  width: 30,
                },
                pointer: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    width: 30,
                  },
                },
                axisTick: {
                  distance: -45,
                  splitNumber: 5,
                  lineStyle: {
                    width: 2,
                    color: "#999",
                  },
                },
                splitLine: {
                  distance: -52,
                  length: 14,
                  lineStyle: {
                    width: 3,
                    color: "#999",
                  },
                },
                axisLabel: {
                  distance: -20,
                  color: "#999",
                  fontSize: 20,
                },
                anchor: {
                  show: false,
                },
                title: {
                  show: false,
                },
                detail: {
                  valueAnimation: true,
                  width: "60%",
                  lineHeight: 40,
                  borderRadius: 8,
                  offsetCenter: [0, "-15%"],
                  fontSize: 20,
                  fontWeight: "bolder",
                  formatter: "{value} °C",
                  color: "auto",
                },
                data: [
                  {
                    value: temp,
                  },
                ],
              },
              {
                type: "gauge",
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                itemStyle: {
                  color: "#FD7347",
                },
                progress: {
                  show: true,
                  width: 8,
                },
                pointer: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                detail: {
                  show: false,
                },
                data: [
                  {
                    value: temp,
                  },
                ],
              },
            ],
          });

          myChart2.setOption({
            series: [
              {
                type: "gauge",
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 10,
                itemStyle: {
                  color: "#409eff",
                },
                progress: {
                  show: true,
                  width: 30,
                },
                pointer: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    width: 30,
                  },
                },
                axisTick: {
                  distance: -45,
                  splitNumber: 5,
                  lineStyle: {
                    width: 2,
                    color: "#999",
                  },
                },
                splitLine: {
                  distance: -52,
                  length: 14,
                  lineStyle: {
                    width: 3,
                    color: "#999",
                  },
                },
                axisLabel: {
                  distance: -20,
                  color: "#999",
                  fontSize: 20,
                },
                anchor: {
                  show: false,
                },
                title: {
                  show: false,
                },
                detail: {
                  valueAnimation: true,
                  width: "60%",
                  lineHeight: 40,
                  borderRadius: 8,
                  offsetCenter: [0, "-15%"],
                  fontSize: 20,
                  fontWeight: "bolder",
                  formatter: "{value} %",
                  color: "auto",
                },
                data: [
                  {
                    value: humi,
                  },
                ],
              },
              {
                type: "gauge",
                center: ["50%", "60%"],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                itemStyle: {
                  color: "#82bfff",
                },
                progress: {
                  show: true,
                  width: 8,
                },
                pointer: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisLabel: {
                  show: false,
                },
                detail: {
                  show: false,
                },
                data: [
                  {
                    value: humi,
                  },
                ],
              },
            ],
          });
        };
      }, 5000);
    },
  },
};
</script>
<style scoped>
.el-menu-demo {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-size: xx-large;
}
#chart1 {
  height: 300px;
  margin-top: 50px;
}
#chart2 {
  height: 300px;
  margin-top: 50px;
}

#temp {
  position: absolute;
  top: 250px;
  left: 300px;
}

#humi {
  position: absolute;
  top: 250px;
  right: 300px;
}
.el-col {
  height: 100%;
  width: 100%;
}
</style>
